<template>
  <div class="graph myGraph" ref="graph"></div>
</template>

<script>
import store from "../../store";

export default {
  props: {
    data: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      graph: null,
    };
  },

  // watch: {
  //   data(value) {
  //     if (this.graph) {
  //       let data = value ? JSON.parse(value) : {};
  //       this.graph.read(data);
  //     }
  //   }
  // },

  methods: {
    // 初始化G6  todo 配置初始化参数
    drawGraph(G6) {
      const grid = new G6.Grid();
      const minimap = new G6.Minimap({
        size: [150, 100],
      });
      const container = window.getComputedStyle(this.$refs["graph"]);
      const graph = new G6.Graph({
        container: this.$refs["graph"],
        height: parseInt(container.height),
        width: parseInt(container.width),
        modes: {
          default: [
            "drag-canvas",
            "zoom-canvas",
            "drag-node",
            "brush-select",
            "add-edge",
            "click-item",
            "hover-node",
            "context-menu",
            "wheel",
            {
              type: "tooltip",
              shouldBegin: (e) => {
                if (e.item && !e.item.getModel().label) return false;
                return true;
              },
              formatText(model) {
                const label = model.label;
                const code = model.code;
                const text = [];
                if (code) {
                  text.push("状态编号: " + code + "<br>");
                }
                if (label) {
                  text.push("状态名称: " + model._label);
                }
                return text.join("\n");
              },
              offset: 30,
            },
            {
              type: "edge-tooltip", // 边提示框 todo
              // 没有内容不显示
              shouldBegin: (e) => {
                // 若当前操作的节点 id 为 'node1'，则不发生 collapse-expand
                if (e.item && !e.item.getModel().label) return false;
                return true;
              },
              formatText(model) {
                const label = model.label;
                const code = model.code;
                const text = [];
                if (code) {
                  text.push("事件编号: " + code + "<br>");
                }
                if (label) {
                  text.push("事件名称: " + label);
                }
                return text.join("\n");
              },
            },
          ],
        },

        defaultNode: {
          type: "base-node",
          size: [160, 50],
          style: {
            radius: 5,
            stroke: "#ccc",
            fill: "#fff",
            lineWidth: 2,
          },
          labelCfg: {
            style: {
              fill: "#000",
              fontSize: 14,
            },
          },
        },

        nodeStateStyles: {
          selected: {
            stroke: "#5b8ff9",
            "anchor-0": {
              opacity: 1,
            },
            "anchor-1": {
              opacity: 1,
            },
            "anchor-2": {
              opacity: 1,
            },
            "anchor-3": {
              opacity: 1,
            },
            "anchor-4": {
              opacity: 1,
            },
            "anchor-5": {
              opacity: 1,
            },
            "anchor-6": {
              opacity: 1,
            },
            "anchor-7": {
              opacity: 1,
            },
            "anchor-8": {
              opacity: 1,
            },
          },
          // hover时锚点的显示
          hover: {
            stroke: "#5b8ff9",
            "anchor-0": {
              opacity: 1,
            },
            "anchor-1": {
              opacity: 1,
            },
            "anchor-2": {
              opacity: 1,
            },
            "anchor-3": {
              opacity: 1,
            },
            "anchor-4": {
              opacity: 1,
            },
            "anchor-5": {
              opacity: 1,
            },
            "anchor-6": {
              opacity: 1,
            },
            "anchor-7": {
              opacity: 1,
            },
            "anchor-8": {
              opacity: 1,
            },
          },
        },
        // 边的样式
        // quadratic
        defaultEdge: {
          // type: 'polyline',
          style: {
            stroke: "#ccc",
            lineWidth: 2,
            lineAppendWidth: 10,
            endArrow: true, // 结束箭头
          },
        },

        edgeStateStyles: {
          selected: {
            stroke: "#5b8ff9",
          },
          hover: {
            stroke: "#5b8ff9",
          },
          // todo  active-edge的状态 动画
          // 'edgeState:hover': {
          //   stroke: '#1890FF'
          // },
          adding: {
            lineDash: [10, 5],
          },
        },

        plugins: [grid, minimap],
      });

      this.graph = graph;
      store.initGraph(graph); // 初始化store中的graph数据
      return graph;
    },
  },
};
</script>

<style scoped>
.graph {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.graph ::v-deep .g6-minimap {
  position: absolute;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
}
</style>
<style>
/* 提示框的样式 */
.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  line-height: 24px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>
